import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useAppContext } from '../../../store'
import { formatPrice, getOrderStatusText, getOrderStatusColor } from '../../../utils'
import './index.scss'

export default function ChefDashboard() {
  const { state, dispatch } = useAppContext()
  const { currentUser, dishes, orders } = state

  // 统计数据
  const totalDishes = dishes.length
  const availableDishes = dishes.filter(dish => dish.available).length
  const pendingOrders = orders.filter(order => order.status === 'pending').length
  const todayOrders = orders.filter(order => {
    const today = new Date()
    const orderDate = new Date(order.createdAt)
    return orderDate.toDateString() === today.toDateString()
  }).length

  const handleLogout = () => {
    dispatch({ type: 'LOGOUT' })
    Taro.navigateBack()
  }

  const navigateTo = (url: string) => {
    Taro.navigateTo({ url })
  }

  const handleStatCardClick = (type: string) => {
    switch (type) {
      case 'total-dishes':
        navigateTo('/pages/chef/dishes/index')
        break
      case 'available-dishes':
        navigateTo('/pages/chef/dishes/index')
        break
      case 'pending-orders':
        navigateTo('/pages/chef/orders/index')
        break
      case 'today-orders':
        navigateTo('/pages/chef/orders/index')
        break
      default:
        break
    }
  }

  return (
    <View className='chef-dashboard'>
      <View className='header'>
        <View className='user-info'>
          <Text className='welcome'>欢迎回来，{currentUser?.name}</Text>
          <Text className='role'>主厨</Text>
        </View>
        <Button className='logout-btn' onClick={handleLogout}>退出</Button>
      </View>

      <View className='stats-grid'>
        <View className='stat-card' onClick={() => handleStatCardClick('total-dishes')}>
          <Text className='stat-number'>{totalDishes}</Text>
          <Text className='stat-label'>总菜品数</Text>
        </View>
        <View className='stat-card' onClick={() => handleStatCardClick('available-dishes')}>
          <Text className='stat-number'>{availableDishes}</Text>
          <Text className='stat-label'>可售菜品</Text>
        </View>
        <View className='stat-card' onClick={() => handleStatCardClick('pending-orders')}>
          <Text className='stat-number'>{pendingOrders}</Text>
          <Text className='stat-label'>待处理订单</Text>
        </View>
        <View className='stat-card' onClick={() => handleStatCardClick('today-orders')}>
          <Text className='stat-number'>{todayOrders}</Text>
          <Text className='stat-label'>今日订单</Text>
        </View>
      </View>

      <View className='quick-actions'>
        <Text className='section-title'>快速操作</Text>
        <View className='action-grid'>
          <View className='action-card' onClick={() => navigateTo('/pages/chef/dishes/index')}>
            <View className='action-icon'>🍽️</View>
            <Text className='action-title'>菜品管理</Text>
            <Text className='action-desc'>添加、编辑、删除菜品</Text>
          </View>
          <View className='action-card' onClick={() => navigateTo('/pages/chef/orders/index')}>
            <View className='action-icon'>📋</View>
            <Text className='action-title'>订单管理</Text>
            <Text className='action-desc'>查看和处理订单</Text>
          </View>
          <View className='action-card' onClick={() => navigateTo('/pages/chef/points/index')}>
            <View className='action-icon'>🎁</View>
            <Text className='action-title'>积分管理</Text>
            <Text className='action-desc'>为客人分配积分</Text>
          </View>
        </View>
      </View>

      <View className='recent-orders'>
        <Text className='section-title'>最近订单</Text>
        <View className='orders-list'>
          {orders.slice(0, 3).map(order => (
            <View key={order.id} className='order-item' onClick={() => navigateTo('/pages/chef/orders/index')}>
              <View className='order-info'>
                <Text className='order-id'>订单 #{order.id.slice(-6)}</Text>
                <Text className='order-customer'>{order.userName}</Text>
                <Text className='order-time'>{new Date(order.createdAt).toLocaleString()}</Text>
              </View>
              <View className='order-status'>
                <Text 
                  className='status-badge'
                  style={{ backgroundColor: getOrderStatusColor(order.status) }}
                >
                  {getOrderStatusText(order.status)}
                </Text>
                <Text className='order-amount'>{formatPrice(order.finalAmount)}</Text>
              </View>
            </View>
          ))}
          {orders.length === 0 && (
            <View className='empty-state'>
              <Text className='empty-text'>暂无订单</Text>
            </View>
          )}
        </View>
      </View>
    </View>
  )
} 